<template>
  <div>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog v-model="open" :title="title" :close-on-click-modal='false' width="500px" append-to-body>
	
	  <el-form ref="listenerFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="listenerName">
          <el-input v-model="form.listenerName" placeholder="请输入监听器名称" />
        </el-form-item>
        <el-form-item label="java类" prop="javaClass">
          <el-input v-model="form.javaClass" placeholder="请输入java类" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" maxlength="200" placeholder="备注" show-word-limit type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
	 
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick, toRef } from "vue";
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from "element-plus";

// 表单实例
const listenerFormRef = ref();
// 是否打开弹出框
const open = ref(false);
// 弹出框标题
const title = ref("");
// 提交表单数据
let form = toRef(
  reactive({
    listenerId: "",
    listenerName: "",
    javaClass: "",
    isSys: 0,
    remark: ""
  })
);
// 表单验证
const rules = ref({
  listenerName: [{ required: true, message: "监听器名称不能为空", trigger: "blur" }],
  event: [{ required: true, message: "事件类型不能为空", trigger: "blur" }],
  javaClass: [{ required: true, message: "java类不能为空", trigger: "blur" }]
});


const emit = defineEmits(["callBack"]);//声明事件(父级页面上添加的 @监听事件)

//父调子的子
const addFormShow = (titleName: string) => {   
  open.value = true;
  title.value = titleName; 
  reset();
};

/**
 * 表单重置
 */
function reset() {
  form.value = {
    listenerId: "",
    listenerName: "",
    javaClass: "",
    isSys: 0,
    remark: ""
  };

  nextTick(() => {
    listenerFormRef.value?.resetFields();
  });
}

//定义类型
interface Listener {
  listenerId: string
  listenerName: string
  javaClass: string
  isSys: number
  remark: string
};

//父调子的子
const updateFormShow = (titleName: string, row: Listener) => {
  open.value = true;
  title.value = titleName; 
  reset();
  baseService.get(`/process/listener/info/${row.listenerId}`).then((res) => {
    if (res.code === 200) {
      form.value = res.data;
    }
  });	
};
  
/**
 * 提交按钮
 */
const submitForm = async() => {
  listenerFormRef.value.validate((valid: boolean) => {
    if (!valid) return;
    baseService.post(`/process/listener/save`, form.value).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        open.value = false;
        emit("callBack");
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
};


defineExpose({
  addFormShow,
  updateFormShow
}) //将子组件方法暴露出来，让父组件调用
</script>

<style scoped></style>
